<template>
	<view class="container">
		<view class="form-box">
			<view class="form">
				<list-cell :hover="false">
					<view class="form-input">
						<view class="label">
							<picker @change="bindPickerChange" :range="dorms">
								<text>🔍参考楼舍</text>
							</picker>
						</view>
						 <input class="input" placeholder="输入楼舍" maxlength="10" v-model="form.dorm" placeholder-class="text-color-assist"/>
					</view>
				</list-cell>
				<list-cell :hover="false">
					<view class="form-input">
						<view class="label">具体位置</view>
						 <textarea class="input" placeholder="房间号或具体地址" maxlength="50" v-model="form.detail"  placeholder-class="text-color-assist"/>
					</view>
				</list-cell>
			</view>
			<view class="btn-section">
				<button v-if="!isUpdate" type="primary" size="default" @tap="addAddress">添加</button>
				<button v-else type="primary" size="default" @tap="updateAddress">更新</button>
			</view>
		</view>
	</view>
</template>

<script>
	import listCell from '@/components/list-cell/list-cell'
	
	export default {
		components: {
			listCell
		},
		data() {
			return {
				isUpdate: false,
				form: {
					id: null,
					dorm: '',
					detail: ''
				},
				dorms: [
					'二区11舍', '二区12舍', '二区13舍', '二区14舍', '二区15舍'
				]
			}
		},
		async onLoad({addressStr}) { // 获取上个页面传入的address JSON对象字符串
			if(addressStr) {
				this.isUpdate = true;
				let address = JSON.parse(addressStr);
				this.form = {
					id: address.id,
					dorm: address.dorm,
					detail: address.detail
				}
			}
		},
		methods: {
			// 选择楼舍
			bindPickerChange(e){
				console.log('picker发送选择改变，携带值为', e.target.value);
				this.form.dorm = this.dorms[e.target.value];
			},
			addAddress() {
				if(!this.vefifyData())
					return ;
				let that = this;
				that.$request('/api-app/address', 'post', that.form).then(result => {
					that.$request('/api-app/user/info', 'get').then(result => {
						that.$store.commit('setUserInfo', result.data);
					});
					uni.navigateBack()
				});
			},
			updateAddress() {
				if(!this.vefifyData())
					return ;
				let that = this;
				that.$request('/api-app/address', 'put', that.form).then(result => {
					that.$request('/api-app/user/info', 'get').then(result => {
						that.$store.commit('setUserInfo', result.data);
					});
					uni.navigateBack()
				});
			},
			vefifyData(){
				console.log(this.form)
				if(this.form.dorm.length <= 0 || this.form.dorm.length > 10 || this.form.detail.length <= 0){
					this.$msg("请输入合法参数")
					return false;
				}
				return true;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.form-box {
		width: 100%;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		color: $text-color-base;
		
		.form-input {
			display: flex;
			align-items: center;
			width: 100%;
		}
		
		.label {
			width: 200rpx;
			font-size: $font-size-lg;
			color: $text-color-base;
			font-weight: 500;
		}
		
		.input {
			flex: 1;
			display: flex;
			align-items: center;
		}
		
		.radio-group {
			display: flex;
			justify-content: flex-start;
			
			.radio {
				padding: 10rpx 30rpx;
				border-radius: 6rpx;
				border: 2rpx solid $text-color-assist;
				color: $text-color-assist;
				font-size: $font-size-base;
				
				&.checked {
					background-color: $color-primary;
					color: $text-color-white;
					border: 2rpx solid $color-primary;
				}
			}
		}
		
		.btn-section {
			margin-top: 20px;
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			
			button {
				font-size: $font-size-base;
				height: 90rpx;
				border-radius: 50rem !important;
				width: 85%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>
